<script setup lang="ts">

import UserIconSvg from "../svg/userIconSvg.vue";
import {onMounted, ref} from "vue";


function getNowTime () {
  var year = new Date().getFullYear(); //年份
  var month = new Date().getMonth() + 1; //月份（0-11）
  var date = new Date().getDate(); //天数（1到31）
  var hour = new Date().getHours(); //小时数（0到23）
  var minute = new Date().getMinutes(); //分钟数（0到59）
  var second = new Date().getSeconds(); //秒数（0到59）
  currentTime.value = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second

}

let currentTime = ref(new Date())
onMounted(()=>{
  setInterval(getNowTime, 500);
})
</script>

<template>
  <div class="title h-10 flex justify-between items-center bg-white select-none">
    <div class="flex justify-start items-center ml-5 gap-2 ">
      <div class="w-6 h-6 rounded-full border-1 border-green-7 border-solid"></div>
      <h3>云南省自然资源调查监测平台</h3>
    </div>
    <div class="flex justify-end items-center mr-5 gap-5">
      <div class="w-100 h-6 bg-#84b9bf skew-x--45 flex justify-center items-center">
        <div class="skew-x-45 text-3">{{currentTime}}</div>
      </div>
      <user-icon-svg class="w-5 h-5 text-#bfbfbf hover:text-#84b9bf"></user-icon-svg>
    </div>
  </div>
</template>

<style scoped>

</style>